<template>
    <div class="albumPage">
      <!-- 歌单信息组件 -->
      <albumList @newList="newList" :album="this.$route.query.album" :singer="singer" :album_name="this.$route.query.album.album_name"></albumList>
      <!--  -->
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo CollectBar"
    mode="horizontal"
    text-color="#001"
    active-text-color="rgb(191, 178, 210)">
    <el-menu-item index="1">单曲</el-menu-item>
    <el-menu-item index="2">详情</el-menu-item>
  </el-menu>
      <!-- 歌曲列表标题栏 -->
      <songListRow></songListRow>
      <!-- 单条歌曲组件 -->
      <songline  :col="index" :music="item" v-for="(item,index) of songs" :key="index"></songline>
    </div>
  </template>
  
  <script>
  import { url } from '@/apiUrl';
  import albumList from './child/albumList.vue';
  import songline from "@/components/songline.vue"
  import songListRow from '@/components/songListRow.vue'
  export default {
      components:{
        albumList,
        songline,
        songListRow
      },
      data() {
        return {
          activeIndex: '1',
          songs:[],
          album:{},
          singer:null
        };
      },
      methods:{
        getSongList(musics,album) {//获取所有的歌曲
          this.singer=musics[0].singer_name
      try {
        var s = {
          title: musics[0].music_name,
          author: musics[0].singer_name,
          url: `${url}/${musics[0].audio_url}`,
          pic: `${url}/${musics[0].img_url}`,
          lrc: musics[0].lyric,
          album: musics[0].album_name
        }
        this.songs.push(s)
      } catch (error) {
        console.log(musics);
        console.log(error);
      }
    },
    newList() {//播放歌单全部歌曲
      var songs=[]
      for(let i in this.songs){
        songs[i]=this.songs[i]
      }
      this.$store.commit("pushNewList", this.songs)
      this.$store.commit("getSong",this.songs[0])

    },
      },
      async  created(){
      await  this.$axios.get(`${url}/musics/getMByAlbum?album_id=${this.$route.query.id}`)
        .then(res=>{
          var album=res.data.data[0]
          this.album=album
          console.log("this.album",album);
          for (var item of res.data.data) {
          this.$axios
            .get(`${url}/musics/musicById?music_id=${item.music_id}`,{})
            .then((res) =>{
              console.log(res.data.data);
              this.getSongList(res.data.data,album)
            });
        }
        })
      },
      mounted(){

    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import '@/assets/common.scss';
  .songlist{
    margin: 1rem;
    display: flex;
    background-color: $undercolor-1;
    border-radius: 5px;
  }
  </style>